import React, { useEffect, useState } from 'react'
import './index.css'
import styleJson from './styleJson'

const BMapGL = window.BMapGL
console.log(BMapGL)

const Index = () => {
    const [mapC, setMapC] = useState(null)
    useEffect(() => {
        var map = new BMapGL.Map("container");
        map.setMapStyleV2({ styleJson: styleJson });
        setMapC(map)
        init(map)
    }, [])
    const init = (map) => {
        // 创建地图实例 
        var point = new BMapGL.Point(116.404, 39.915);
        // // 创建点坐标 
        map.centerAndZoom(point, 15);
        drawPoint(map)
    }
    //自定义点位
    const drawPoint = (m) => {
        const opt = {
            position: new BMapGL.Point(116.404, 39.915),
            offet: new BMapGL.Size(30, -30)
        }
        let labal = new BMapGL.Label(`<div class="cacle">自定义</div>`, opt)
        labal.setStyle(
            {
                background: 'none',
                border: 'none'
            }
        )
        m.addOverlay(labal)
        m.addEventListener('click', e => {
            console.log(e)

        })
    }
    return <div>地图
        <div id="container" style={{ height: '100vh' }}></div>
    </div>
}

export default Index